<template>
  <div class="container">
    <h1>复习列表</h1>
    <table class="data-table">
      <thead>
      <tr>
        <th>时间</th>
        <th>内容</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in paginatedItems" :key="item.id">
        <td>{{ item.sj }}</td>
        <td>{{ item.nr }}</td>
      </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>当前页: {{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>
<script setup>
import {
  wcao,
  post
} from "@/http";
import {ref, computed} from 'vue';

const items = ref([]); // 用于存储所有数据项
const currentPage = ref(1);
const itemsPerPage = ref(10); // 每页显示的项数

const totalPages = computed(() => {
  return Math.ceil(items.value.length / itemsPerPage.value);
});

const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return items.value.slice(start, end);
});

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};
const getAllData = () => {
  // 实现查询
  post('/learn/fuxi', {}, (res) => {
    console.log('接收到后端的返回数据:', res);
    items.value = res;
  }, (res) => {
    ElMessage.warning(res.message);
  });
};
getAllData();
</script>

<style scoped>
.container {
  /* max-width: 800px; */
  margin: 0 auto;
  /* padding: 20px; */
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.data-table th,
.data-table td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.data-table th {
  background-color: #f2f2f2;
}

.data-table tr:nth-child(odd) {
  background-color: #deb887;
  /* 偶数行背景色 */
}

.data-table tr:nth-child(even) {
  background-color: #f6ffd8;
  /* 奇数行背景色 */
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>